<template>
  <div>
    <el-card shadow="never">
      <el-form>
        <el-form-item label="企业名称" label-width="80px">
          <el-input v-model="enterpriseParams.name" placeholder="请输入企业名称" style="width:300px;margin-right:10px" />
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="$router.push('/updateenterprise')">添加企业</el-button>
      <!-- 表格 -->
      <el-table
        stripe
        :data="enterpriseList"
        style="width: 100%;margin-top:20px"
        @expand-change="handleExpandChange"
      >
        <el-table-column type="expand">
          <template>
            <el-table :data="enterpriseRent" style="margin-left:200px">
              <el-table-column label="租赁楼宇" prop="buildingName" />
              <el-table-column label="租赁起止时间">
                <template #default="scope">
                  {{ scope.row.startTime }}
                  <span>至</span>
                  {{ scope.row.endTime }}
                </template>
              </el-table-column>
              <el-table-column label="合同状态" prop="status">
                <template #default="scope">
                  <span v-if="scope.row.status===0">待生效</span>
                  <span v-else-if="scope.row.status===1">生效中</span>
                  <span v-else-if="scope.row.status===2">已到期</span>
                  <span v-else>已退租</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="text" size="mini" :disabled="scope.row.renewFlag===0?true:false">续租</el-button>
                  <el-button type="text" size="mini" :disabled="scope.row.exitFlag===1?false:true">退租</el-button>
                  <el-button type="text" size="mini" :disabled="scope.row.status===3?false:true">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="180"
          align="center"
        >
          <template #default="scope">
            {{ (enterpriseParams.page-1)*enterpriseParams.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="企业名称"
          width="180"
          align="center"
        />
        <el-table-column
          prop="contact"
          label="联系人"
          align="center"
        />
        <el-table-column
          prop="contactNumber"
          label="联系电话"
          align="center"
        />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text">添加合同</el-button>
            <el-button type="text" @click="$router.push(`/detail/${scope.row.id}`)">查看</el-button>
            <el-button type="text" @click="$router.push(`/updateenterprise/${scope.row.id}`)">编辑</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--  -->
      <!-- 分页 -->
      <div style="text-align: right">
        <el-pagination
          layout="prev, pager, next,jumper,sizes"
          :total="total"
          :page-size="enterpriseParams.pagesize"
          :page-sizes="[5, 10, 20]"
          @current-change="changePage"
          @size-change="Sizechangge"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getEnterprise, getRent, delEnterprise } from '@/api/enterprise'
export default {
  data() {
    return {
      enterpriseId: '',
      enterpriseRent: [], // 新表格的数据
      total: null,
      enterpriseList: [],
      enterpriseParams: {
        name: '',
        page: '1',
        pageSize: '10'
      }
    }
  },
  async created() {
    await this.getEnterprise()
  },
  methods: {
    async getEnterprise() {
      const res = await getEnterprise(this.enterpriseParams)
      console.log(res)
      this.total = res.data.data.total
      this.enterpriseList = res.data.data.rows
      console.log(this.enterpriseList)
    },
    // 分页
    changePage(page) {
      this.enterpriseParams.page = page
      this.getBuildList()
    },
    Sizechangge(size) {
      this.enterpriseParams.pageSize = size
      this.getBuildList()
    },
    // 搜索
    async search() {
      const res = await getEnterprise(this.enterpriseParams)
      console.log(res)
      this.enterpriseList = res
      this.getEnterprise()
    },
    // // 获取租赁合同
    // async getRent(id) {
    //   const res = await getRent(id)
    //   console.log(res)
    //   this.subTableData = res.data.data
    //   this.showSubTable = !this.showSubTable
    //   console.log(this.subTableData)
    // },
    // 删除企业

    async del(id) {
      await delEnterprise(id)
      this.$message.success('删除成功')
      this.getEnterprise()
    },
    // 展开行的回调
    async handleExpandChange(row) {
      this.enterpriseId = String(row.id)
      const res = await getRent(this.enterpriseId)
      // console.log(res.data)
      this.enterpriseRent = res.data.data
      console.log(this.enterpriseRent)
    }
  }
}
</script>

<style scoped lang='scss'></style>
